import Loadable from "react-loadable";
import myAble from "../utils/able";

function Loading() {
  return (
    <div
      style={{
        width: 200,
        height: 200,
        background: "orange"
      }}
    ></div>
  );
}

const Home = myAble(() => import("../pages/Home"));
const About = myAble(() => import("../pages/About"));
const Login = myAble(() => import("../pages/Login"));

const One = myAble(() => import("../pages/home/One"));
const Two = myAble(() => import("../pages/home/Two"));
const My = myAble(() => import("../pages/home/My"), Loading);

// import Home from "../pages/Home"
// import Login from "../pages/Login"
// import About from "../pages/About"

// import One from '../pages/home/One'
// import Two from '../pages/home/Two'
// import My from '../pages/home/My'

// const HomeAble = Loadable({
//     loader: () => import("url"),
//     loading: Loding
// })

// const HomeAble = Loadable({
//     // 对那个组件进行懒加载
//     loader: () => import('../pages/Home'),
//     // 加载中的状态
//     loading: Loading
// })

// const OneAble = Loadable({
//     // 对那个组件进行懒加载
//     loader: () => import('../pages/home/One'),
//     // 加载中的状态
//     loading: Loading
// })

// const TwoAble = Loadable({
//     // 对那个组件进行懒加载
//     loader: () => import('../pages/home/Two'),
//     // 加载中的状态
//     loading: Loading
// })

export default [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    component: Home,
    children: [
      {
        path: "/home",
        redirect: "/home/one",
      },
      {
        path: "/home/one",
        component: One,
        title: "首页",
      },
      {
        path: "/home/two",
        component: Two,
        title: "列表",
        auth: true,
      },
      {
        path: "/home/my",
        component: My,
        title: "我的",
        // auth: true
      },
    ],
  },
  {
    path: "/login",
    component: Login,
  },
  {
    path: "/about",
    component: About,
  },
];
